<template>
    <TabGrayEasyCard :title="'二装监控'" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :lineText="''" :barText="''" :unitText="`工单数：${card.unitText}`"
        :updateText="card.updateText" v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true }">

        <slot>
            <el-table :data="card.tableData" height="100%">
                <el-table-column prop="desc" label="节点" :align="'left'" />
                <el-table-column label="铺位数量" :align="'right'">
                    <template #default="scope">
                        {{ scope.row.unitBunks.length }}
                    </template>
                </el-table-column>
                <el-table-column label="铺位面积" :align="'right'">
                    <template #default="scope">
                        {{ scope.row.unitBunkRentArea }}
                    </template>
                </el-table-column>
                <el-table-column label="面积占比" :align="'right'">
                    <template #default="scope">
                        {{ (scope.row.unitBunkRentArea / totalArea * 100).toFixed(2) }}%
                    </template>
                </el-table-column>
            </el-table>
        </slot>
    </TabGrayEasyCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import dashBoardApi from '@/api/Prepare/Business/dashBoard'
import { reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'

const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    projectCode: {
        type: String,
        required: false,
        default: ''
    },
    totalArea: {
        type: String,
        required: false,
        default: ''
    },
    updateDate: {
        type: String,
        required: false,
        default: ''
    }
})
const card = reactive(
    {
        tabs: [{ label: '全部', value: '全部' }],
        curTab: '全部',
        tabRight: '',
        unitText: '个',
        updateText: '',
        tableData: [],
        // startDate: '',
        // endDate: '',
    }
)
const getChartData = () => {
    dashBoardApi.secondMonitorCollectCardListApi(props.projectCode).then((res) => {
        if (res.data.code == 0) {
            card.tableData = res.data.data
        }
    }).catch(err => {
        console.log(err)
    });
}

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
}
getChartData()

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    getChartData()
}, { deep: true });
</script>

<style scoped lang="scss"></style>
